<template>
    <div class="page-edit">
        <BreadCrumb :list="crumbList"></BreadCrumb>
        <div class="page-content">
            <div class="flex-between">
                <p class="edit-litter-header">编辑素材</p>
                <el-button class="srt-el-button srt-el-button-h32" @click="handleAdd">添加素材</el-button>
            </div>
            <div class="flex-between edit-material-header">
                <p class="header-left-wrap">素材</p>
                <p class="header-right-wrap">操作</p>
            </div>
            <el-form v-if="contentList.length" ref="editRef" :model="contentList" :label-width="80" v-loading="loading">
                <div v-for="(childItem, index) in contentList" :key="index" class="list-box">
                    <div class="flex-between">
                        <div class="left-wrap">
                            <div class="video">
                                <template v-if="!checkMaterialType(childItem.materialVO?.materialType).isText">
                                    <!-- 视频资源 -->
                                    <div class="video-wrapper-custom" v-if="childItem.materialVO?.materialType === 'video'" :style="dynamicBackground(childItem.materialVO)">
                                        <div class="video-black-mask">
                                            <!-- <span class="iconfont icon-a-bofang1x video-pause-btn" @click="handlePreview(childItem.materialVO)"></span> -->
                                            <svg class="video-pause-btn" @click="handlePreview(childItem.materialVO)" xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70">
                                                <path transform="translate(15,15) scale(0.04,0.04)" d="M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z"></path>
                                            </svg>
                                            <div class="video-custom-time" v-if="childItem.unitValue">{{fmtVideoTime(childItem.unitValue)}}</div>
                                        </div>
                                    </div>
                                    <div class="video-wrapper" v-else>
                                        <Video :player-id="`player-${childItem.materialVO?.materialId}`" :video-data="childItem.materialVO" :isReport="false" :isShowTime="true" :videoConfig="fmtVideoConfig(childItem)" height="90px" @set-duration="setDuration"/>
                                    </div>
                                    <!-- <div class="time" v-if="childItem.unitValue">时长：{{fmtVideoTime(childItem.unitValue)}}</div> -->
                                </template>
                                <div v-else class="file-wrapper" :class="[childItem.materialVO?.materialType]">
                                    <div>
                                        <div class="tag">{{childItem.materialVO?.materialFullName}}</div>
                                        <div class="size">{{childItem.materialVO?.materialSizeFormat}}</div>
                                    </div>
                                </div>
                            </div>
                            <el-form-item 
                                :label="tipsMap[handleMaterialType(childItem.materialVO?.materialType)].title"
                                :prop="index + '.contentTitle'"
                                class="srt-el-input-item mt16"
                                :rules="[{
                                    required: true,
                                    validator: nameRule,
                                    trigger: 'blur'
                                 }]">
                                <el-input show-word-limit maxlength="50" type="text" v-model="contentList[index].contentTitle" class="srt-el-input h32"
                                    placeholder="请输入标题，最多50个字" style="width: 680px;">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="添加字幕" prop="contentTitle" class="srt-el-input-item" v-if="checkMaterialType(childItem.materialVO?.materialType).isVideo">
                                <UploadSubmit :subtitle-obj="contentList[index].subtitle" @update-subtitle="(param) => {updateSubTitle(param, index)}"></UploadSubmit>
                            </el-form-item>
                            <el-form-item
                                v-if="checkMaterialType(childItem.materialVO?.materialType).isText"
                                label="学习时长"
                                :prop="index + '.unitValue'"
                                class="srt-el-input-item input-form h32"
                                :rules="[{
                                    required: true,
                                    validator: timeRule,
                                    trigger: 'blur'
                                 }]">
                                <el-input type="text" v-model="contentList[index].unitValue" class="srt-el-input input-number"
                                    placeholder="请输入">
                                    <!-- <template #suffix>
                                        <span class="unit">分钟</span>
                                    </template> -->
                                </el-input>
                                <span class="mar-l10">分钟</span>
                                <span class="content-tip" v-if="checkMaterialType(childItem.materialVO?.materialType).isText">预估阅读学习文档所需的时间</span>
                            </el-form-item>
                        </div>
                        <div class="right-wrap">
                            <el-button v-if="index > 0" class="srt-el-button srt-el-button--link srt-el-button-h32 btn" @click="handleMaterial('up', childItem, index)">上移</el-button>
                            <el-button v-if="index < contentList.length - 1" class="srt-el-button srt-el-button--link srt-el-button-h32 btn" @click="handleMaterial('down', childItem, index)">下移</el-button>
                            <el-button class="srt-el-button srt-el-button--link srt-el-button-h32 btn" @click="handleMaterial('delete', childItem)">删除</el-button>
                        </div>
                    </div>
                </div>
            </el-form>
            <div v-else>
                <NoData url="no-course.png" :show-info="false">
                    <div class="no-data-info">
                        暂无内容，请添加<el-button class="srt-el-button srt-el-button--link btn" @click="handleAdd">课程素材</el-button>
                    </div>
                </NoData>
            </div>
        </div>
        <FooterSubmit :loading="loading" @cancel="back" @submit="save"/>
         <!-- 素材库 isForciblySelect-->
        <yanxiu-material-dialog
            v-model="addVisible"
            :category="materialConfig.category"
            :mode="0"
            :limit="limitNum"
            :selectedMaterials="selectedMaterials"
            :disabled-deselect="true"
            :limitType="materialConfig.limitType"
            :limitSize="listSize"
            previewEnable
            showMyMaterial
            @on-ok="fileInsert"
        />
        <ContentPreviewDialog v-model="previewsDialog" :form="catalogueData"/>
    </div>
</template>
<script setup>
import Video from '@/views/catalogue-detail/part/video-cell.vue'; // 视频
import YanxiuMaterialDialog from '@/components/yanxiu-material-dialog.vue';
import BreadCrumb from '@/components/bread-crumb.vue';
import FooterSubmit from '@/components/common-footer-submit.vue';
import UploadSubmit from './part/upload-subtitle.vue';
import NoData from '@/components/no-data.vue';
import ContentPreviewDialog from '@/components/content-preview-dialog.vue';
import { ref, onMounted, computed, nextTick, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { fmtTime } from '@/lib/biz-tools.js'
import { jumpHref } from '@/router/jumpHref';


const route = useRoute();

const subTitleMap = ref({});

// 批量选中的素材列表
const contentList = ref([]);

// 面包屑
const crumbList = ref([]);

const nameRule = (rule, value = '', callback) => {
    let temp = value && value.trim() || '';
    if (temp.length > 50 || temp.length < 2) {
        callback('请输入2-50个字的标题');
    }else {
        callback();
    }
}

const timeRule = (rule, value, callback) => {
    let temp = Number(value);
    if (!/^[0-9]+(.[0-9]{1})?$/.test(temp) || temp > 120 || temp < 0.5) {
        callback('请输入0.5-120之间的数，最多1位小数');
    } else if(!temp){
        callback(new Error('请输入学习时长'));
    } else {
        callback();
    }
}


const tipsMap = {
    'video': {
        title: '视频标题',
        file: '视频'
    },
    'audio': {
        title: '音频标题',
        file: '音频'
    },
    'text': {
        title: '文档标题',
        file: '文档'
    }
}

// 素材库限制数量
const limitNum = ref(10);

// 素材库限制大小
const listSize = {
    document: 1 * 500 * 1024 * 1024,
    video: 2 * 1024 * 1024 * 1024,
    audio:  1 * 100 * 1024 * 1024,

}

// 素材类型
const materialConfig = computed(() => {
    return {
        category: ['video', 'audio', 'document'],
        limitType: {
            video: ['wmv', 'avi', 'mp4', 'mov', 'flv'],
            audio: ['mp3', 'wma', 'flac', 'm4a', 'ogg', 'ape', 'amr', 'wav', 'aac', 'aiff', 'caf'],
            document: ['doc', 'docx', 'ppt', 'pptx', 'txt', 'xls', 'xlsx', 'pdf', 'rtf', 'odt'],
        },
    }
})

const previewsDialog = ref(false);

// 目录内容
const catalogueData = ref({});

// 已经选择的素材
const selectedMaterialIds = computed(() => {
    return selectedMaterials.value.map(item => item.materialId);
})

// 已经选择的素材
const selectedMaterials = ref([]);

// 素材库对话框
const addVisible = ref(false);

// 选择素材
function fileInsert(fileList) {
    if (!fileList.length) {
        return;
    }
    let ids = [];
    fileList.forEach(async (item) => {
        if (!selectedMaterialIds.value.includes(item.materialId) && item.materialId) {
            let index = contentList.value.length - 1;
            let temp = {
                materialVO: item,
                contentTitle: item.materialName,
                unitValue: item.duration,
                contentId: item.materialId,
                unit: 1,
                subtitle: null,
                index: index
            }
            contentList.value.push(temp);
        }
        item.materialType === 'video' && ids.push(item.materialId)
    })
    getSubTitleList(ids);
}

// 添加视频
async function handleAdd() {
    selectedMaterials.value = contentList.value.map(item => item?.materialVO);
    await nextTick();
    addVisible.value = true;
}

// 格式化时间
function fmtVideoTime(val = 0) {
    return fmtTime(val);
}

const editRef = ref(null);

// 提交保存
function save() {
    if (contentList.value && contentList.value.length <= 0) {
        G_dispatchEvent('toast', { message: '请先添加素材', type: 'error'});
        return;
    }
    editRef.value.validate((valid) => {
        let tempList = []; // 文件视频临时数组
        // let zmList = []; // 字幕文件
        let deleteList = []; // 字幕插入文件
        let insertList = []; // 字幕删除文件
        let notLoad = false; // 没有加载的音视频的数量
        let notFillIn = false; // 没有填写信息
        contentList.value.forEach(item => {
            if (!item.unitValue && !checkMaterialType(item.materialVO.materialType).isText) { // 没有时长的音视频
                notLoad = true;
            }
            if (!item.contentTitle || !item.unitValue) { 
                notFillIn = true;
            }
            let realUnitValue = checkMaterialType(item.materialVO.materialType).isText ? item.unitValue * 60 : item.unitValue;
            
            tempList.push({
                contentTitle: item.contentTitle,
                unitValue: realUnitValue,
                contentId: item.materialVO.materialId,
                unit: 1,
                tag: item.materialVO.materialType,
                contentType: 'material'
            });
            // if(item.subtitle) {
            //     let subtitle = item.subtitle;
            //     zmList.push({
            //         materialId: item.materialVO.materialId,
            //         subtitleName: subtitle.nameWithoutSuffix,
            //         subtitleUrl: subtitle.fullUrl,
            //         subtitleSize: subtitle.size,
            //         subtitleType: subtitle.name.slice(subtitle.name.lastIndexOf('.') + 1),
            //         subtitleInitType: 1,
            //         orderIndex: 0,
            //         ispType: subtitle.ispType
            //     })
            // }
            let materialId = item.materialVO.materialId;
            let subTitleMapObj = subTitleMap.value[materialId];
            // 先判断现在有没有字幕，有的话和视频字幕进行比对
            if(!item.subtitle) { // 当前没字幕
                if (subTitleMapObj) {
                    deleteList.push(subTitleMapObj.subtitleId);
                }
            } else {    // 如果现在有字幕，判断和之前的一样不
                if (!item.subtitle.subtitleId) { // 不存在subtitleId，说明字幕变了
                    let subtitle = item.subtitle;
                    insertList.push({
                        materialId: materialId,
                        subtitleName: subtitle.nameWithoutSuffix,
                        subtitleUrl: subtitle.fullUrl,
                        subtitleSize: subtitle.size,
                        subtitleType: subtitle.name.slice(subtitle.name.lastIndexOf('.') + 1),
                        subtitleInitType: 1,
                        orderIndex: 0,
                        ispType: subtitle.ispType
                    })
                    subTitleMapObj && subTitleMapObj.subtitleId && deleteList.push(subTitleMapObj.subtitleId);
                } else if (item.subtitle.subtitleId !== subTitleMapObj.subtitleId) {
                    subTitleMapObj && subTitleMapObj.subtitleId && deleteList.push(subTitleMapObj.subtitleId);
                }
            }
        })
        if(!valid) {
            if (notFillIn) {
                G_dispatchEvent('toast', { message: '信息未填写完整', type: 'error'});
            } else {
                G_dispatchEvent('toast', { message: '请准确填写信息', type: 'error'});
            }
            return;
        }
        
        if(notLoad) {
            G_dispatchEvent('toast', { message: '请等待音视频加载结束后点击保存', type: 'error'});
            return;
        }
        loading.value = true;

        subtitleSave(tempList, insertList, deleteList);
    })
}

// 字幕保存
function subtitleSave(tempList, insertList, deleteList) {
    if (insertList.length === 0 && deleteList.length === 0) {
        courseContentSave(tempList);
        return
    }
    G_transmit('subtitleSave', {
        data: {
            insertList: insertList,
            deleteList: deleteList
        }
    })
    .then((res) => {
        courseContentSave(tempList);
    }).catch((_err) => {
        loading.value = false;
    })
}

// 内容保存
function courseContentSave(tempList) {
    G_transmit('courseContentCreate', {
        data: {
            contentList: tempList,
            courseId: route.params.courseId,
            pid: route.query.pid
        }
    })
    .then((res) => {
        G_dispatchEvent('toast', { message: '保存成功', type: 'success'});
        back();
    })
    .catch((_err) => {
        console.log(_err)
    }).finally(() => {
        loading.value = false;
    });
}


const loading = ref(false);

// 返回
function back() {
    let name = crumbList.value[3].route;
    G_go(name);
}


// 获取目录名称
function getFolderByIds() {
    G_transmit('getFolderByIds', {
        data: {
           catalogueIdList: [route.query.pid], // 课程id
        },
        silence: true
    }).then((res) => {
        let data = res.data?.length && res.data[0] || {};
        let breadList = getBreadList();
        breadList[0].name = data.catalogueName;
        crumbList.value = breadList;
    }).catch(_err => {
        console.log(_err);
    })
}

function backMoocList() {
    let query = window.location.search.substring(1);
    return jumpHref.mooc.moocList(query);
}

function backEditMooc () {
    return jumpHref.mooc.moocManage(route.query.moocId, route.query.tabStr);
}

// 获取面包屑数据
function getBreadList () {
    let breadRoute = {};
    breadRoute = {
        name: route.query.from,
        params: {
            courseId: route.params.courseId,
        },
        query: {
            step: 2,
            ...route.query
        }
    }

    return [
        {
            name: '首页',
            route: jumpHref.home.home(),
        },
        {
            name: '慕课管理',
            route: backMoocList(),
        },
        {
            name: '编辑慕课',
            route: backEditMooc(),
        },
        {
            name: '编辑课程章节',
            route: breadRoute,
        },
        {
            name: '编辑素材',
            route: {
                name: '',
            }
        }
    ]
}

// 课程详情
const moocDetail = ref({});

function getCourseDetail () {
    G_transmit('courseDetail', {
        queries: {
           id: route.params.courseId
        },
        silence: true
    })
    .then((res) => {
        moocDetail.value = res.data || {};
    })
    .catch((err) => {
        console.log(err)
    })
}

// 提示语
function handleItemTips (type) {
    let key = type;
    return tipsMap[key];
}

// 判断素材类型
function handleMaterialType (materialType) {
    if (materialType === 'video') {
        return materialType
    } else if (materialType === 'audio') {
        return materialType
    } else if (materialType === 'img') {
        return materialType
    } else if (['doc', 'ppt', 'pdf', 'xls'].includes(materialType)) {
        return 'text'
    } else {
        return 'other'
    }
}

// 判断素材是否是某种格式
function checkMaterialType (materialType) {
    let isText = false;
    let isVideo = materialType === 'video';
    let isAudio = materialType === 'audio'
    if(!['video', 'audio'].includes(materialType)) {
        isText = true;
    }
    return {isText, isVideo, isAudio};
}


// 移动及删除素材
function handleMaterial (type, materialItem, index) {
    const tempList  = contentList.value || [];
    switch (type) {
        case 'up':
            // 上移 将当前数组index索引与后面一个元素互换位置，向数组后面移动一位
            swapArray(contentList.value, index, index - 1);
            break
        case 'down':
            // 下移 将当前数组index索引与前面一个元素互换位置，向数组前面移动一位
            swapArray(contentList.value, index, index + 1);
            break
        case 'delete':
            contentList.value = tempList.filter(item => item.materialVO.materialId !== materialItem.materialVO.materialId);
            break
    }
}

function swapArray(arr, index1, index2) {
    arr[index1] = arr.splice(index2, 1, arr[index1])[0];
    return arr;
}

function updateSubTitle (subtitle, index) {
    console.log('zm===', subtitle, index);
    if (contentList.value[index]) {
        contentList.value[index].subtitle = subtitle;
    }
}

// controls: false 关闭控制条 播放器控制条由播放/暂停、定位、音量、全屏切换等元素组成
function fmtVideoConfig(item) {
    return {volume: 0, autoplay: item.materialVO?.materialType === 'audio', controlsList: ['nofullscreen'], controls: false}
}

// 音视频加载时长
function setDuration({playerId, duration}) {
    let arr = playerId.split('-');
    let contentId = arr.length > 1 && arr[1] || '';
    let index = contentList.value.findIndex(item => item.contentId === contentId);
    if(index > -1 && !contentList.value[index].unitValue) {
        contentList.value[index].unitValue = duration;
    }
}

// 获取字幕列表 目录有视频获取字幕
function getSubTitleList (ids) {
    if (ids && ids.length) {
        G_transmit('subtitleSearch', {
            data: {
                materialIds: ids,
                subtitleInitType: 1
            }
        }).then(async (res) => {
            subTitleMap.value = {};
            (res.data || []).forEach(item => {
                subTitleMap.value[item.materialId] = item;
            });
            (contentList.value || []).forEach(item2 => {
                if (item2.materialVO.materialType === 'video' && subTitleMap.value[item2.materialVO.materialId]) {
                    item2.subtitle = subTitleMap.value[item2.materialVO.materialId]
                }
            })
        }).catch((_err) => {
            console.log(_err)
        }).finally(() => {
        })
    }
}

// 动态设置背景图片
function dynamicBackground (materialVO) {
    if (materialVO?.snapshotCover) {
        return {
            background: `url(${materialVO?.snapshotCover})`,
            backgroundSize: '100% 100%'
        }
    } else {
        return {
            background: '#000000'
        }
    }
}

function handlePreview(materialVO) {
    catalogueData.value.title = materialVO?.materialName;
    catalogueData.value.materialVO = materialVO;
    previewsDialog.value = true;
}

onMounted(() => {
    if (route.query.pid) {
        let breadList = getBreadList();
        crumbList.value = breadList;
        // getFolderByIds();
        handleAdd();
        getCourseDetail();
    } else {
        G_dispatchEvent('toErrorPage', { title: '请先选择目录', code: 500});
    }
})

onBeforeUnmount(() => {

})

</script>

<style lang="scss" scoped>

@mixin img-style(){
    content: '';
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
}
.page-edit {
    padding-bottom: 30px;
}
.page-content {
    background: #ffffff;
    padding: 30px;
    .edit-litter-header {
        font-size: 14px;
        line-height: 1;
        margin: 0 4px;
        font-weight: bold;
        &::before {
            content: '';
            display: inline-block;
            width: 3px;
            height: 14px;
            background-color: var(--srt-main-active-text-color);
            margin-right: 8px;
            vertical-align: bottom;
        }
    }

    :deep(.el-form-item) {
        margin-bottom: 16px;
    }

    :deep(.el-form-item__label) {
        line-height: 32px;
        height: 32px;
        color: var(--srt-color-gray);
        margin-right: 8px;
    }

    .btn-form {
        :deep(.el-form-item__label) {
            line-height: 32px;
            height: 32px;
        } 
        .add-btn {
            width: 100px;
        }
    }

    .input-width {
        width: 680px;
    }
    .video-wrapper-custom {
        position: relative;
        height: 90px;
        width: 160px;
        border-radius: 3px;
        overflow: hidden;
        .video-black-mask {
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 101;
            display: flex;
            justify-content: center;
            align-items: center;
            .video-pause-btn {
                width: 26px;
                height: 26px;
                fill: #ffffff;
                cursor: pointer;
                &:hover{
                    opacity: 0.85;
                }
            }
            .video-custom-time {
                position: absolute;
                color: #ffffff;
                font-size: 14px;
                right: 8px;
                bottom: 4px;
                line-height: 22px;
            }
        }
    }
    .video-wrapper {
        height: 90px;
        width: 160px;
        position: relative;
        :deep(.video-player), :deep(.xgplayer-poster) {
            border-radius: 3px;
        }
        :deep(.xgplayer-start) {
            width: 26px;
            height: 26px;
            line-height: 26px;
            margin: -13px auto auto -13px;
            svg {
                width: 26px;
                height: 26px;
                // transform: translate(-2px, -2px);
            }
        }
        
        :deep(.xgplayer-controls) {
            height: 20px;
            .xgplayer-progress {
               height: 10px;
            }
            .xgplayer-play {
                width: 20px;
            }
            svg, .xgplayer-volume,.xgplayer-icon {
                width: 20px;
                height: 20px;
            }
            .xgplayer-volume {
                margin-right: 8px;
                .xgplayer-icon {
                    bottom: -1px;
                }
            }
            .xgplayer-time {
                height: 20px;
                line-height: 22px;
                font-size: 12px;
            }
            .xgplayer-fullscreen {
                display: none;
            }

        }
    }
    .video {
        .time {
            font-size: 14px;
            color: var(--srt-color-gray);
            margin-top: 12px;
            line-height: 1;
            &::before {
                content: '\e6bb';
                font-family: 'iconfont';
                margin-right: 6px;
                font-size: 16px;
                display: inline-block;
                vertical-align: middle;
                transform: translateY(-1px);
            }
        }
    }
}

.input-form {
    .input-select {
        height: 40px;
        width: 100px;
        min-height: 40px;
        :deep(.el-input) {
             height: 40px;
        }
        :deep(.el-input__wrapper) {
             border-radius: 4px 0px 0px 4px;
        }
    }
    .input-number {
        height: 40px;
        width: 220px;
        margin-left: -1px;
        :deep(.el-input__wrapper) {
            border-radius: 0px 4px 4px 0px;
        }
        .unit {
            color: var(--srt-color-gray);
        }
    }
}
.file-wrapper {
    width: 764px;
    background: #F7F9FA;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 10px 16px 9px;
    &.doc, &.docx {
        &::before {
            @include img-style();
            background: url('~@/assets/img/resource-type/doc@2x.png') no-repeat;
            background-size: contain;
        }
    }
    &.ppt, &.pptx {
        &::before {
            @include img-style();
            background: url('~@/assets/img/resource-type/ppt@2x.png') no-repeat;
            background-size: contain;
        }
    }
    &.xls, &.xlsx{
        &::before {
            @include img-style();
            background: url('~@/assets/img/resource-type/excel@2x.png') no-repeat;
            background-size: contain;
        }
    }
    &.pdf {
        &::before {
            @include img-style();
            background: url('~@/assets/img/resource-type/pdf@2x.png') no-repeat;
            background-size: contain;
        }
    }

    &.files {
        &::before {
            @include img-style();
            background: url('~@/assets/img/resource-type/files@2x.png') no-repeat;
            background-size: contain;
        }
    }

    &.rest,
    &.unknown {
        &::before {
            @include img-style();
            background: url('~@/assets/img/resource-type/rest@2x.png') no-repeat;
            background-size: contain;
        }
    }
    .size {
        line-height: 1;
        margin-top: 10px;
        color: var(--srt-color-gray);
        font-size: 12px;
    }
    .tag {
        font-size: 14px;
        color: var(--srt-main-text-color);
        overflow: hidden;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 704px;
    }
}
.mar-l10 {
    margin-left: 10px;
    color: var(--srt-main-text-color);
}
.content-tip {
    font-size: 14px;
    color: var(--srt-color-gray);
    margin-left: 12px;
    &::before {
        content: '\e70e';
        font-family: 'iconfont';
        margin-right: 6px;
        font-size: 16px;
        vertical-align: bottom;
    }
}
.list-box {
    border-top: 1px solid #E0E2E4;
    padding-top: 20px;
    &:first-child {
        border-top: none;
        padding-top: 0px;
    }
}
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.edit-material-header {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    background: #F6F6F6;
    border-radius: 4px 4px 0px 0px;
    border: 1px solid #E0E2E4;
    margin: 20px 0;
    color: var(--srt-color-gray);
}
.no-data-info {
    font-size: 14px;
    color: var(--srt-color-gray);
    line-height: 22px;
    .btn {
        font-size: 14px;
        height: 22px;
    }
}
.left-wrap {
    width: 770px;
}
.right-wrap {
    width: 148px;
    text-align: right;
    padding-right: 30px;
    .btn:nth-child(n+2) {
        margin-left: 17px;
    }
}

.header-left-wrap {
    width: 770px;
    padding-left: 20px;
}
.header-right-wrap {
    width: 148px;
    text-align: left;
    padding-right: 20px;
}
.h32 {
    :deep(.el-input__inner) {
        height: 30px;
    }
}
.mt16 {
   margin-top: 16px;
}
</style>